Thank you for purchasing our product. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!
Potency Template has a lot of features and functionality:
All the HTML codes and section are well separated by line space and comment so that you can modify easily. As an example here below is the sample codes for portfolio section:
<!-- Portfolio Block
================================================== -->
<section class="portfolio-block bg-soft-black pd-t-150 pd-b-150 pm-tb-90" id="portfolio-block">
<div class="container-xl">
<div class="row">
<div class="col-lg-2">
<h5 class="sm-title color-snow">Portfolio</h5><!-- /.sm-title -->
<div class="heading-divider mrb-45">
<span></span>
<span></span>
</div><!-- /.heading-divider -->
<h2 class="xl-title color-snow">Our Featured Portfolio</h2>
<div class="vertical-divider mrl-30 mrt-30 mrb-30"></div><!-- /.vertical-divider -->
<ul class="portfolio-filter color-snow">
<li><a href="#" data-filter="*" class="active">All</a></li>
<li><a href="#" data-filter=".branding">Branding</a></li>
<li><a href="#" data-filter=".mockups" class="">Mockups</a></li>
<li><a href="#" data-filter=".print">Print</a></li>
<li><a href="#" data-filter=".illustration">Illustration</a></li>
</ul><!-- /.portfolio-filter -->
</div><!-- /.col-lg-2 -->
<div class="col-lg-10">
<div class="row portfolio-grid">
<div class="col-md-6 illustration item">
<div class="portfolio-item">
<figure class="portfolio-thumb">
<img src="assets/images/portfolio/portfolio-1.jpg" alt="Portfolio Item">
<div class="overlay-wrapper">
<div class="overlay"></div><!-- /.overlay -->
<div class="popup">
<div class="popup-inner">
<a href="assets/images/portfolio/portfolio-1.jpg" class="popup-image"><i class="fa fa-search"></i></a>
</div><!-- /.popup-inner -->
</div><!-- /.popup -->
</div><!-- /.overlay-wrapper -->
</figure><!-- /.portfolio-thumb -->
<div class="content">
<h3><a href="portfolio-detail.html">Branding Abstract Design</a></h3>
<div class="cate"><a href="#">Branding</a></div>
</div>
</div><!-- /.portfolio-item -->
</div><!-- /.col-md-4 -->
</div><!-- /.portfolio-grid -->
<div class="row mr-0">
<div class="col-lg-12 text-center mrt-30">
<a href="#" class="btn btn-main bg-hr-dv-orange color-white">More Works</a>
</div><!-- /.col-lg-12 -->
</div><!-- /.row -->
</div><!-- /.col-lg-10 -->
</div><!-- /.row -->
</div><!-- /.container-xl -->
</section><!-- /.portfolio-block -->
Our all custom and external CSS is located in assets/css directory. And if you edit or work with SCSS you may go to the main assets/sass. Then you work Both. Some Example below:
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Typography
## typography
## headings
## Others Typography
# Elements
## elements
## Font Size
## Font Weight
## Margin Element
## Padding Element
## Color Element
## Background Element
## Extra Background
## SVG Fill
## Social Element
## Overlay Element
## Border element
## Border Extra Elements
## Radius Element
## lists
## tables
## Others Element
## Grid Element
# Forms
## buttons
## fields
# Media
## Captions
## Galleries
## media
# modules
## accessibility
## alignments
## clearings
## infinite-scroll
# Header Content
## Preloader
## Header
# navigation
## Links
## Menus
## Pagination
## Navigation responsive
# layout
## Banner Block
## Hero Block
## Socail Status
## Counter Element
## File featured Element
## Card Element
## Service
## Team
## Progress Bar
## Subscriber Block
## Featured On Block
## Tab Style
## Portfolio
## Portfolio Single
## Testimonial
## Blog
# others
## Blog Single
## Pricing Table
## Coming Soon
# site content
## About Page
## Contact Page
## 404 Page
## Posts and pages
## Page-header
## Page Heading
## Process of work
## No results
## Asides
## Comments
## Widgets
## Widgets Content
# Footer
--------------------------------------------------------------*/
// Initial color with name $black: #000000; // Black $black_russian: #0d1422; // Black Russian $blue_violet: #7540ee; // Blue Violet $corn_field: #fff9c0; // Corn Field $charcoal: #484848; // Charcoal $citrus: #94b800; // Citrus $dim_gray: #646363; // Dim Gray $darkgray: #aeaeae; // Dark gray $eclipse: #3c3c3c; // Eclipse $gray: #767676; // Gray $green: #0cc919; // Matterhorn $golden: #ffcc00; // golden $golden_poppy: #f8c000; // Golden Poppy $gainsboro: #dddddd; // Gainsboro $harley_davidson_orange: #e12d1e; // Harley Davidson Orange $lavender: #eeedfd; // Lavender $lochmara: #21759b; // Lochmara $medium_slate_blue: #8655f4; // Medium Slate Blue $matterhorn: #4d4d4d; // Matterhorn $nevy: #232C3B; // Nevy blue $night_rider: #2d2d2d; // Night Rider $nero: #191919; // Nero $orange: #ffa800; // Orange Color $snow: #fafafa; // Snow $silver: #c3c3c3; // Silver $white: #ffffff; // White $white_smoke: #f7f7f7; // White Smoke $suva_grey: #919191; // Suva Grey $soft_nero: #2a2a2a; // Soft Nero $soft_black: #121212; // Black $turquoise: #03dedf; // Bright Turquoise $tangerine_yellow: #ffcc00; // Tangerine Yellow $yellow: #F9F500; // yellow $very_light_grey: #cccccc; // Very Light Grey //Text color $color_text_main: #636363; // body text main color $color__heading: #1d1d1f; // Heading color $color__menu-text: #282828; // Menu text color $color__widget-text: #cbcaca; // Widget text color $color__meta: #b3b3b3; // Post meta color $color__meta-footer: #515151; // Post Footer meta color $color__meta-widget: #8b8b8b; // Post Footer meta color $color__footer: #7e7e7e; // Post Footer text-color $color__novel: #999999; // Color Nobel $color__ligth-gray: #d2d2d2; // Light Gray //border color $color__border-one: #ebebeb; // Widget. Feature background Stock $color__border-two: #e1e1e1; // featured and trending border $color__border-three: #d2d2d2; // Menu after content color $color__border-four: #f0f0f0; // Post heading, widget border-bottom $color__border-five: #646464; // Footer Widget border
This template has following javascript plugins:
all these files are located in assets/js folder, And our custom js is located in assets/ js folder in the root directory.
Like CSS and HTML, our JavaScript codes on our main.js file are also well organized and well commented.
For example, if you want to change the functionality of Banner slider just find the following block of codes and change it according to your need:
/* ---------------------------------------------
Progress Bar
--------------------------------------------- */
progress_var: function() {
var $progressBar = $('.skill-progress');
var $skillBar = $('.skill-bar');
if($progressBar.length) {
var $section = $progressBar.parent();
function loadDaBars() {
$skillBar.each(function() {
$(this).find('.progress-content').animate({
width: $(this).attr('data-percentage')
}, 1500);
$(this).find('.progress-mark').animate({
left: $(this).attr('data-percentage')
}, {
duration: 1500,
step: function(now, fx) {
var data = Math.round(now);
$(this).find('.percent').html(data + '%');
}
});
});
}
loadDaBars();
}
},
/*======================================================================= Template Name: Potency Template URI: https://htmlguru.net/potency-html/ Author: HTMLguru Author URI: https://htmlguru.net/ Description: It is a HTML5 Agency & Portfolio Template. Which is a unique feature and user competitive feature. Version: 1.0 ======================================================================= */
We are thankful for...
Once again, thank you so much for purchasing this product. As we said at the beginning, We'd be glad to help you if you have any questions relating to this product. No guarantees, but we'll do our best to assist. If you have a more general question relating to this product on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.
HTMLguru